<template>
	<view class="container">
		<view class="search bg-fff">
			<u-search placeholder="搜索商品" :show-action="false" v-model="pageForm.search" height="56" @search="search" ></u-search>
			
			<view class="tabs flex-align-center"  v-if="is_show">
				<view class="tabs-list">
					<u-tabs :list="tabsList" :is-scroll="false" :current="tabsCurrent" :active-color="$setting.colorTheme()" @change="tabsChange"></u-tabs>
				</view>
				
				<!-- <image class="tabs-image" :src="$setting.imageUrl()+'screen.png'" v-show="screen == 1" @click="screen = 2"></image>
				<image class="tabs-image" :src="$setting.imageUrl()+'screen2.png'" v-show="screen == 2" @click="screen = 1"></image> -->
			</view>
		</view>
		
		
		<view v-if="is_show">
		<view class="search-placeholder"></view>
		
		<view class="product-con bg-fff" v-show="screen == 1">
			<view class="product-item flex-align-center" v-for="(item,index) in productList" :key="index" @click="toDetail(item)">
				<image class="product-item-image" :src="item.product_image"></image>
				<view class="product-item-con flex-column-space-between">
					<view class="product-item-name">{{item.product_name}}</view>
					<view class="flex-space-between">
						<view class="product-item-price flex-align-center">
							<view><text>￥</text>{{item.product_price}}</view>
							<text>￥{{item.product_sku.line_price}}</text>
						</view>
						
						<!-- <view class="product-item-sales">交易{{item.product_sales}}笔</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="product-list flex-space-between flex-wrap" v-show="screen == 2">
			<view class="product-item bg-fff" v-for="(item,index) in productList" :key="index">
				<view class="product-item-box-image">
					<view v-if="item.product_stock==0" class="product-item-box-bg" @click="toDetail(item)">
						<view class="product-item-box-txt">补货中</view>
					</view>
					<image
					v-if="item['mark']"
					class="mark-at-top"
					:src="item['mark']['icon']"
					mode="widthFix"
					:style="
						item.mark.position == 0
							? 'top:' +
								item.mark.t_margin +
								'px; left:' +
								item.mark.l_margin +
								'px;'
							: 'top:' +
								item.mark.t_margin +
								'px; right:' +
								item.mark.l_margin +
								'px;'
					"
					></image>
					<image class="product-item-image" mode="widthFix" :src="item.product_image" @click="toDetail(item)"></image>
				</view>
				<view class="product-con" @click="toDetail(item)">
					<view style="height: 80rpx;" v-if="item.discount_product_data.gift_product_data.file_path">
						<view class="pentagonBox" @click="activityPopupFun(item.discount_product_data)">
							<view class="pentagon"><view class="pentagonTxt">买赠活动</view></view>
							<image class="pentagonImage" :src="item.discount_product_data.gift_product_data.file_path"></image>
							<u-icon name="arrow-right" size="20" color="#9ea09a"></u-icon>
						</view>
					</view>
					<view class="product-con-name">
							<view v-if="item.discount_product_data.activity_type==1" class="seckill-activity">{{quantityDiscount(item.discount_product_data.rebate_json) }}1</view>
						<view v-if="item.discount_product_data.activity_type==2" class="seckill-activity">首件{{ item.discount_product_data.first_price }}元 {{ item.discount_product_data.start_buy_num }}件起购</view>
						<view v-if="item.discount_product_data.activity_type==3" class="seckill-activity"><view class="seckill-activity-ele">赠</view>买{{ item.discount_product_data.buy_num }}赠{{ item.discount_product_data.gift_num }}</view>
						<view>
							<span class="product-label" v-if="item['label']">
								{{ item['label']['label_name'] }}
							</span>
							{{ item.product_name }}
						</view>

					</view>
					<view class="flex-space-between">
						<view class="">
							<view class="flex-space-between">
								<view class="product-con-price"><text>￥</text>{{item.product_price}}</view>
							</view>
							
							<view class="flex-space-between">
								<view class="product-item-old-price"><text>￥</text>{{item.product_sku.line_price}}</view>
								<!-- <view class="product-item-sales">交易{{item.product_sales}}笔</view> -->
							</view>
						</view>
						<view class="buynow">购买</view>
					</view>
					
				</view>
			</view>
			
			<view class="product-item" v-if="productList.length % 2 == 1"></view>
		</view>
		
		<view v-if="productList.length > 0">
			<b-u-loadmore :status="loadmoreStatus"></b-u-loadmore>
		</view>
		<view v-else style="padding-top: 100rpx;">
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>
		<!-- 赠品活动详情 -->
		<u-popup v-model="activityPopup" mode="bottom" border-radius="24" closeable close-icon="close-circle"
			z-index="11000" close-icon-size="40">
			<view class="popup-service">
				<view class="popup-service-title">活动详情</view>
				<view class="popup-service-txt" v-if="discountProductData.explain">{{ discountProductData.explain }}</view>
				<view class="popup-service-list">
						<view class="product-item flex product-item-gift">
							<image style="width: 100rpx;height: 100rpx;" :src="discountProductData.gift_product_data.file_path"></image>
							<view class="product-item-con flex-column-space-between">
								<view>
									<view class="product-item-name u-line-1">{{discountProductData.gift_product_data.product_name}}</view>
									<!-- <view class="product-item-suk">{{gift_product_data.file.real_name}}</view> -->
								</view>

								<view class="flex-space-between">
									<view class="product-item-num">x{{discountProductData.gift_num}}</view>
									<view class="product-item-price">赠品</view>
								</view>
							</view>
						</view>
				</view>
			</view>
		</u-popup>
		
		</view>
		
		<view v-if="product_show" style="margin-top: 100rpx;background-color: none;">
			<ul>
				<li  icon="el-icon-search" v-for="item in product_list" style="height: 70rpx;line-height: 70rpx;margin:auto;width: 90%;" @click="choose(item)">
				<u-icon name="search"  size="28"></u-icon>
				
				<span style="margin-left: 10rpx;">{{item}}</span>
				
				<view style="height: 2rpx;background-color:#eae5e5; width: 100%;text-align: center;margin: auto;"></view>
				</li>
				
			</ul>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screen: 2,
				tabsList: [
					{
						id: 'all',
						name: "综合"
					},
					{
						id: 'sales',
						name: "销量"
					},
					{
						id: 'score',
						name: "评分"
					},
				],
				tabsCurrent: 0,
				pageForm: {
					page: 1,
					list_rows: 20,
					sortType: 'all',
					search: "",
				},
				productList: [],
				loadmoreStatus: 'nomore',
				activityPopup:false,
				discountProductData:'',
				is_show:true,
				product_show:false,
				product_list:['漓泉','茅台'],
				is_choose:false,
			}
		},
		onLoad(options) {
			if(!uni.$u.test.isEmpty(options.search)) {
				this.pageForm.search = options.search;
			}
		},
		onShow() {
			this.getHttp();
		},
		onReachBottom() {
			if(this.loadmoreStatus == 'nomore') {
				return;
			}
			this.pageForm.page++;
			this.getSupplier();
		},
		methods: {
			quantityDiscount(rebate_json){
				if(Array.isArray(rebate_json) && rebate_json.length>0){
					let formattedString = rebate_json.map(item => {  
						let discounts = (parseFloat(item.rebate) / 10).toFixed(1);
						let DisNumber = discounts.substring(0, discounts.indexOf('.'));
						let point = discounts.substring(discounts.indexOf('.') + 1,discounts.indexOf('.') + 2);
						let discount = DisNumber+(point>0?'.'+point:'');
						return `${item.num}件${discount}折`;  
					}).join(' '); 
				return formattedString
				}
			},
			getSearchKeywords(str){
				uni.$u.api.getSearchKeywords({
					keywords: str
				}).then(res => {
					this.product_list = res.list;
					this.is_show = false
					this.product_show = true
					
					
				})
			},
			
			change(e){
				 let str = e.replace(/\s+/g, '')
				 let length = str.length;
				if(length>=2 && this.is_choose == false){
					this.getSearchKeywords(str)
				}else{
					this.is_show = true
					this.product_show = false
				}
			},
			choose(e){
				this.pageForm.search = e
				this.is_show = true
				this.product_show = false
				this.is_choose = true
				this.search();
			},
			
			activityPopupFun(item){
				this.discountProductData = item
				this.activityPopup = true
			},
			toDetail(item){
				// console.log('item',item)
				if(item.activity_type=="discount"){
					this.jump('/pages/categoty/product/product_limited?id='+item.product_id)
				}else if(item.categorydetail.type==1){
					this.jump('/pages/categoty/product/product_no_cart?id='+item.product_id)
				}else{
					this.jump('/pages/categoty/product/product?id='+item.product_id)
				}
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			search() {
				this.pageForm.page = 1;
				this.productList = [];
				this.getProductLists();
				
			},
			tabsChange(e) {
				this.tabsCurrent = e;
				
				if(this.tabsList[e].id == 'sortPrice') {
					this.pageForm.sortType = 'all';
					this.pageForm.sortPrice = 1;
				} else {
					this.pageForm.sortType = this.tabsList[e].id;
					this.pageForm.sortPrice = 0;
				}
				this.search();
			},
			getProductLists() {
				this.loadmoreStatus = 'loading';
				uni.$u.api.getProductLists(this.pageForm).then(res => {
					this.productList = this.productList.concat(res.list.data);
					this.loadmoreStatus = 'loadmore';
					if(this.productList.length  == res.list.total) {
						this.loadmoreStatus = 'nomore';
					}
				})
			},
			getHttp() {
				this.pageForm.page = 1;
				this.productList = [];
				this.search();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		.buynow{
			background: #BB0024;
			color: #fff;
			border: 1px solid #BB0024;
			font-size: 12px;
			overflow: visible;
			padding: 4rpx 16rpx;
			border-radius: 22rpx;
		}
		.search {
			padding: 16rpx 30rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 980;
			
			.tabs {
				
				.tabs-list {
					flex: 1;
				}
				
				.tabs-image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.search-placeholder {
			height: 152rpx;
		}
		
		.product-con {
			padding: 30rpx;
			
			.product-item {
				height: 219rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #EBEBEB;
				padding-bottom: 30rpx;
				
				.product-item-image {
					width: 165rpx;
					height: 165rpx;
				}
				
				.product-item-con {
					margin-left: 30rpx;
					flex: 1;
					height: 100%;
					
					.product-item-name {
						font-size: 28rpx;
						color: #111111;
					}
					
					.product-item-price {
						
						view {
							font-size: 32rpx;
							color: $uni-color-theme;
							
							text {
								font-size: 22rpx;
								color: $uni-color-theme;
								text-decoration: none;
							}
						}
						
						text {
							font-size: 22rpx;
							text-decoration: line-through;
							color: #CCCCCC;
						}
					}
					
					.product-item-sales {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
		
		.product-list {
			padding: 30rpx;
			
			.product-item {
				width: 334rpx;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				overflow: hidden;
				padding: 16rpx;
			}
			.product-item-box-image {
				position: relative;
				.product-item-box-bg {
					position: absolute;
						top: 0;
						left: 0;
						width: 334rpx;
						height: 328rpx;	
						background-color: rgba(0, 0, 0, 0.3);
						z-index: 99;
						opacity: 0.8;
						display: flex;
						justify-content: center;
						align-items: center;
					.product-item-box-txt {
						color: #fff;
						font-size: 26rpx;
						background-color: rgba(0, 0, 0, 0.8);
						border-radius: 30rpx;
						padding: 0 14rpx;
						white-space: nowrap;
						line-height: 38rpx;
						
					}
				}			
			}
			.product-item-image {
				display: block;
    			width: 100%;
			}
			
			.product-con {
				padding: 20rpx 0 18rpx;
				
				.product-con-name {
					width: 100%;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 26rpx;
					color: #111111;
					font-weight: bold;
					margin-bottom: 14rpx;
				}
				
				.product-con-price {
					font-size: 36rpx;
					font-weight: bold;
					color: $uni-color-theme;
					
					text {
						font-size: 24rpx;
					}
				}
				
				.product-item-old-price {
					font-size: 22rpx;
					text-decoration: line-through;
					color: #CCCCCC;
				}
				
				.product-item-sales {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.seckill-activity {
						font-size: 24rpx;
						padding: 0 4rpx;
						margin: 10rpx 0;
						color: #bb0024;
						display: flex;
						align-items: center;
						border-radius: 8rpx;
						border: 1px solid #bb0024;
						display: inline-block;
					.seckill-activity-txt {
						border: 1px solid #bb0024;
						border-radius: 50%;
						font-size: 18rpx;
						width: 26rpx;
						height: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 6rpx;
						display: inline-block;
						text-align: center;
						transform: scale(0.8);
					}
					.seckill-activity-ele {
						display: inline-block;
						padding: 0 4rpx;
						background-image: linear-gradient(to right, #bb0024, #fa0032);
						color: #fff;
						margin:0 10rpx 0 -4rpx;
						border-radius: 8rpx 0 8rpx 8rpx;
					}
				}
		}
		.popup-service-title {
	font-size: 36rpx;
	border-bottom: 20rpx solid #F6F6F6;
	text-align: center;
	padding: 34rpx 0;
}
.pentagonBox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.pentagonImage {
		width: 80rpx;
		height: 80rpx;
		margin-left: -100rpx;
	}
	.pentagon {
		width: 80rpx;
		height: 80rpx;
		background-color: #fde9eb;
		clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
		transform: rotate(90deg);
		display: flex;
		justify-content: center;
		align-items: center;
		.pentagonTxt {
			width: 40rpx;
			transform: rotate(-90deg);
			font-size: 16rpx;
			color: #bb0024;

		}
	}
}
.popup-service-txt {
		font-size: 24rpx;
		color: #E80D0D;
		padding:0 20rpx;
	}
		.popup-service-list {
	padding: 20rpx;

	.popup-service-list-title {
		font-size: 24rpx;
		color: #111111;
		// text-align: center;
		margin-bottom: 36rpx;
	}
	
	.popup-service-item {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background: #F6F6F6;
		padding: 26rpx 22rpx;

		.popup-service-image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 5rpx;
		}

		.popup-service-name {
			font-size: 28rpx;
			color: #111111;
		}

		.popup-service-describe {
			font-size: 20rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	.product-item {
	margin-bottom: 100rpx;

	.product-item-image {
		width: 128rpx;
		height: 128rpx;
	}

	.product-item-con {
		margin-left: 16rpx;
		flex: 1;

		.product-item-name {
			width: 460rpx;
			font-size: 28rpx;
			color: #111111;
		}

		.product-item-suk {
			font-size: 24rpx;
			color: #999999;
		}

		.product-item-num {
			font-size: 24rpx;
			color: #999999;
		}

		.product-item-price {
			font-size: 28rpx;
			color: $uni-color-theme;
		}
	}
}
}
	}
.product-label {
	background: #BB0024;
	padding: 0rpx 10rpx 2rpx 10rpx;
	color: #fff;
	font-size: 12px;
	border-radius: 10rpx;
	margin-right: 10rpx;
}
.mark-at-top {
	position: absolute;
	z-index: 80;
	width: 120rpx;
}
</style>
